<template>
    <div class="form">
        <div class="date">
            <el-row type="flex" justify="space-around">
                <el-col :span="5">
                    <el-date-picker v-model="selectDate.start" type="date" placeholder="选择开始日期">
                    </el-date-picker>
                </el-col>
                <el-col :span="5" :offset="1">
                    <el-date-picker v-model="selectDate.end" type="date" placeholder="选择截止日期">
                    </el-date-picker>
                </el-col>
                <el-col :span="2" :offset="1">
                    <el-button type="primary" @click="search(selectDate.start,selectDate.end,'search')">查询</el-button>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" @click="search(selectDate.start,selectDate.end,'export')">下载</el-button>
                </el-col>
            </el-row>

        </div>

        <div class="table">
            <el-table :data="tableData" stripe border style="width: 100%" v-loading.body="loading">
                <el-table-column type="index" width="53">
                </el-table-column>

                <el-table-column type="expand">
                    <template scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">

                            <el-form-item label="签约时间：">
                                <span>{{ props.row.assignmentManage.signDate |formatDate }}</span>
                            </el-form-item>
                            <el-form-item label="仪器类型：">
                                <span>{{ props.row.assignmentManage.instrumentType }}</span>
                            </el-form-item>
                            <el-form-item label="仪器型号：">
                                <span>{{ props.row.assignmentManage.instrumentVersion}}</span>
                            </el-form-item>
                            <el-form-item label="合同期始：">
                                <span>{{ props.row.assignmentManage.contractStart |formatDate }}</span>
                            </el-form-item>
                            <el-form-item label="合同期止：">
                                <span>{{ props.row.assignmentManage.contractEnd |formatDate}}</span>
                            </el-form-item>
                            <el-form-item label="合同总额：">
                                <span>{{ props.row.assignmentManage.contractSum }}</span>
                            </el-form-item>
                            <el-form-item label="合作期：">
                                <span>{{ props.row.assignmentManage.cooperationDate }}</span>
                            </el-form-item>
                            <el-form-item label="开展项目数：">
                                <span>{{ props.row.mob.projectNum }}</span>
                            </el-form-item>
                            <el-form-item label="日均标本数：">
                                <span>{{ props.row.mob.specimenNum }}</span>
                            </el-form-item>
                            <el-form-item label="协议类型：">
                                <span>{{ props.row.assignmentManage.agreementType }}</span>
                            </el-form-item>
                            <el-form-item label="长征项目：">
                                <el-button v-if="props.row.mob.isProject.length > 0" size="mini" @click="showProject(props.row.mob.isProject,1)">点击查看</el-button>
                                <span v-else>无</span>
                            </el-form-item>
                            <el-form-item label="非长征项目、厂家：">
                                <el-button v-if="props.row.mob.notProject.length" size="mini" @click="showProject(props.row.mob.notProject,0)">点击查看</el-button>
                                <span v-else>无</span>
                            </el-form-item>
                            <el-form-item label="其他说明：">
                                <el-button v-if="props.row.mob.detail" size="mini" @click="showDetail(props.row.mob.detail)">点击查看</el-button>
                                <span v-else>无</span>
                            </el-form-item>
                            <el-form-item label="附件：">
                                <el-button v-if="props.row.mob.images.length > 0" size="mini" @click="showImg(props.row.mob.images)">点击查看</el-button>
                                <span v-else>无</span>
                            </el-form-item>
                            <el-form-item label="部门：">
                                <span>{{ props.row.assignmentManage.department}}</span>
                            </el-form-item>
                            <el-form-item label="地理位置：" class="location_width">
                                <span v-if="props.row.mob.location">{{ props.row.mob.location.address }}</span>
                                <span v-else>无</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>

                <el-table-column prop="assignmentManage.contractCode" label="合同编号" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="" label="符合度" show-overflow-tooltip>
                    <template scope="scope">
                        <el-button size="small" style="width : 50px" type="info" plain @click="decideById(scope.row.mob)">{{!scope.row.mob.decide || scope.row.mob.decide == '1' ? '是' : '否'}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="mob.userName" label="执行人" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="mob.build" :formatter="formatterRow" label="类型" width="70" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="mob.executeDate" :formatter="dateFormat" label="提交时间" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="assignmentManage.manageTop" label="分管上级" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="assignmentManage.principal" label="负责人" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="assignmentManage.area" label="地区" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="assignmentManage.client" label="客户" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="assignmentManage.terminal" label="终端" show-overflow-tooltip>
                </el-table-column>
                <el-table-column fixed="right" label="编辑" width="150" align="center">
                    <template scope="scope">

                        <el-button type="primary" size="mini">
                            <span style="color: #FFF;font-size:15px" @click="editForm(scope.row.mob,'is')">长征</span>
                        </el-button>
                        <el-button type="primary" size="mini">
                            <span style="color: #FFF;font-size:15px" @click="editForm(scope.row.mob,'not')">非长征</span>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="limit" :page-sizes="[10, 20, 30, 40]" layout="sizes, prev, pager, next" :total="count">
            </el-pagination>
        </div>
        <!-- 图片显示弹窗 -->
        <el-dialog title="图片" :visible.sync="imageShow" :modal-append-to-body='false' top="10%">
            <div v-for="item in imgData" :key="item.id" style="width:100%">
                <div style="width:30%;float:left;margin-left:10px;margin-bottom:10px">
                    <!-- <a :href="item.url" target="_blank"><img :src="item.url" width="100%" /></a> -->
                    <button @click="openImg(item.url)"><img :src="item.url" width="100%" /></button>
                </div>
            </div>
        </el-dialog>
        <el-dialog title="查看" :visible.sync="oneImg.oneImgShow" :modal-append-to-body='false' top="10%">
            <div style="width:100%;padding:10px;">
                <img :src="oneImg.url" width="100%" />
            </div>
        </el-dialog>
        <!-- 长征显示弹窗 -->
        <el-dialog :title="dialogTitle" :visible.sync="projectShow" :modal-append-to-body='false' top="10%">
            <el-table :data="projectData" stripe>
                <el-table-column type="index" width="100">
                </el-table-column>
                <el-table-column property="projectName" label="名称" show-overflow-tooltip></el-table-column>
            </el-table>
        </el-dialog>
        <!-- 非长征显示弹窗 -->
        <el-dialog :title="dialogTitle" :visible.sync="notProjectShow" :modal-append-to-body='false' top="10%">
            <el-table :data="projectData" stripe>
                <el-table-column type="index" width="53">
                </el-table-column>
                <el-table-column property="projectName" label="名称" show-overflow-tooltip>
                </el-table-column>
                <el-table-column property="manufacturersName" label="厂家" show-overflow-tooltip>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 其他说明显示弹窗 -->
        <el-dialog :title="dialogTitle" :visible.sync="detailShow" :modal-append-to-body='false'>
            <p class="textarea">
                {{textarea}}
            </p>
        </el-dialog>
        <!-- Form -->
    </div>
</template>
<script>
import moment from 'moment';
export default {
    name: "form",
    data() {
        return {
            oneImg: {
                oneImgShow: false,
                url: ''
            },
            selectDate: { start: '', end: '' },
            imageShow: false,
            projectShow: false,
            notProjectShow: false,
            detailShow: false,
            textarea: '',
            dialogTitle: '',
            projectData: [],
            tableData: [],
            imgData: [],
            count: 0,
            skip: 0,
            limit: 10,
            loading: true
        };
    },
    methods: {
        decideById (res) {
            this.loading = true;
            let decide = '1';
            if(!res.decide || res.decide == '1'){
                decide = '0';
            }
            this.$http.post('api/investment/decideById', { decide : decide , _id : res._id }).then(res => {
                if (res.data.code == 100) {
                    this.initList();
                    this.message("操作成功", "success");
                    this.loading = false;
                }
            }, err => {
                this.message("未知错误", "error");
            });
        },
        formatterRow(row, column, cellValue){
            // console.log(cellValue,'cellValue')
            if(cellValue == 'build'){
                return '自建'
            }
            if(cellValue == 'once'){
                return '一次'
            }
            if(cellValue == 'cycle'){
                return '周期'
            }
        },
        openImg: function(url) {
            this.oneImg.oneImgShow = true;
            this.oneImg.url = url;
        },
        dateFormat: function(row, column, cellValue) {
            var date = cellValue;
            if (date == undefined) {
                return "";
            }
            return moment(date - 0).format("YYYY-MM-DD HH:mm:ss");
        },
        exportExcel: function() {
            this.loading = true;
            this.$http.post('api/exportExcel', { search: this.selectDate }).then(res => {
                if (res.data.code == 100) {
                    this.loading = false;
                    this.excel(res.data.data);
                }
            }, err => {
                this.message("未知错误", "error")
            });
        },
        excel: function(excelUrl) {
            console.log(excelUrl, 'excelUrl')
            this.$confirm('是否下载报表到本地?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'info' }).then(res => {
                window.location.href = excelUrl;
                // this.message('下载成功', 'success');
            }).catch(() => {
                this.message('取消下载', 'info');
            });
        },
        search: function(start, end,res) {
            if(this.selectDate.end){
                end = moment(this.selectDate.end).format('YYYY-MM-DD 23:59:59');
                this.selectDate.end = end;
            }
            if(this.selectDate.start){
                start = moment(this.selectDate.start).format('YYYY-MM-DD 0:0:0');
                this.selectDate.start = start;
            }
            if (start && end && start > end) {
                this.message('时间有误', 'warning')
                return;
            }
            if(res == 'export'){
                this.exportExcel();
            }
            if(res == 'search'){
                this.initList('search');
            }
        },
        handleCurrentChange: function(res) {
            if (res == 1)
                this.skip = 0;
            else
                this.skip = (res - 1) * this.limit
            this.initList();
        },
        handleSizeChange: function(res) {
            this.limit = res;
            this.initList();
        },
        showImg: function(imgs) {
            this.imgData = imgs;
            this.imageShow = true;
        },
        showProject: function(project, res) {
            res == 0 ? (this.dialogTitle = '非长征项目、厂家', this.notProjectShow = true) : (this.dialogTitle = '长征项目', this.projectShow = true);
            this.projectData = project;
        },
        showDetail: function(detail) {
            this.dialogTitle = '其他说明';
            this.textarea = detail;
            this.detailShow = true;
        },
        initList: function(search) {
            this.$http.post('api/investment/queryList', {
                search: this.selectDate,
                skip: this.skip,
                limit: this.limit
            }).then(res => {
                let result = res.data;
                if (result.code == 100) {
                    this.loading = false;
                    if (search == "search") {
                        this.message('查询成功', 'success');
                    }
                    console.log(res.data);
                    this.tableData = result.data;
                    this.count = result.count;
                }
            }, err => {

            });
        },
        editForm: function(mob, res) {
            sessionStorage.setItem("mobId", mob._id);
            if (res == 'is')
                this.$router.push({ path: "/EditProjectForm" })
            else
                this.$router.push({ path: "/EditNotProjectForm" })
        },
        message: function(msg, type) {
            this.$message({
                message: msg,
                type: type
            });
        }
    },
    created: function() {
        this.initList();
        sessionStorage.removeItem("mobId");
    }
}
</script>
<style lang="css" scoped>
.date {
  margin: 15px 0;
}

.table {
  margin: 1rem 1rem;
}

.el-table .cell,
.el-table th > div {
  font-size: 18rem;
  color: A6A6A6;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33%;
}

.demo-table-expand .location_width {
  width: 50%;
}

.textarea {
  padding: 15px;
}
</style>